<template>
   <el-form-item v-if="curComponent.swiperList" label="轮播图设置">
                <el-button @click="addswiper(curComponent.swiperList,curComponent.component)">添加</el-button>
                    <div style="clear:both" v-for="(item,i) of curComponent.swiperList" :key="i">
                        <div>第{{i+1}}张</div>
                        <el-input  v-model="item.url" type="textarea" />
                        <el-button type="danger" size="mini" @click="delswiper(curComponent.swiperList,i)">删除第{{i+1}}张</el-button>
                         <Upload :type="'primary'" @confrim="(e)=>{confrim(e,curComponent.swiperList,i)}" :text="'上传轮播'"></Upload>
                        <div>
                            <span>点击跳转链接</span>
                            <el-input  v-model="item.link" type="text" />
                        </div>
                        <div v-if="curComponent.component=='v-swiperinner'" >
                            <span>标题</span>
                            <el-input  v-model="item.title" type="text" />
                        </div>
                        <div v-if="curComponent.component=='v-swiperinner'">
                            <span>内容</span>
                            <el-input  v-model="item.content" type="textarea" />
                        </div>
                        <!-- swiperList -->
                        <div v-if="curComponent.component=='v-swiperinner'">
                        <div>
                             <span>标题颜色</span>
                             <el-color-picker   v-model="item.titleStyle['color']"></el-color-picker>
                        </div>
                         <div>
                             <span>标题大小</span>
                            <el-input  v-model="item.titleStyle['fontSize']" type="number" />
                        </div>
                        <div>
                             <span>标题上边距</span>
                            <el-input  v-model="item.titleStyle['margin-top']" type="number" />
                        </div>
                          <div>
                             <span>标题左边距</span>
                            <el-input  v-model="item.titleStyle['margin-left']" type="number" />
                        </div>
                        <hr>
                             <div>
                             <span>内容颜色</span>
                             <el-color-picker   v-model="item.contentStyle['color']"></el-color-picker>
                        </div>
                         <div>
                             <span>内容大小</span>
                            <el-input  v-model="item.contentStyle['fontSize']" type="number" />
                        </div>
                        <div>
                             <span>内容边框</span>
                            <el-input  v-model="item.contentStyle['borderWidth']" type="number" />
                        </div>
                        <div>
                             <span>内容上边距</span>
                            <el-input  v-model="item.contentStyle['margin-top']" type="number" />
                        </div>
                          <div>
                             <span>内容左边距</span>
                            <el-input  v-model="item.contentStyle['margin-left']" type="number" />
                        </div>
                          <div>
                             <span>内容右边距</span>
                            <el-input  v-model="item.contentStyle['margin-right']" type="number" />
                        </div>
                         <div>
                             <span>内容垂直内边距</span>
                            <el-input  v-model="item.contentStyle['paddingAlign']" type="number" />
                        </div>
                          <div>
                             <span>内容横向内边距</span>
                            <el-input  v-model="item.contentStyle['paddingBetween']" type="number" />
                        </div>
                        </div>
                    </div>
          </el-form-item>
</template>

<script>
import  Upload  from '../Upload/index.vue'
export default {
    props:['curComponent'],
    components:{Upload},
    methods:{
         delswiper(list,i){
            if(list.length==1){
                this.$message.error("再删就没有啦！")
                return
            }
             list.splice(i,1)
        },
        confrim(res,list,i){
            list[i].url=res
        },
        addswiper(list,name){
            if(name=='v-swiper'){
                list.push({url:"",link:''})
                list.push({url:"",link:''})
            }else{
                list.push({url:"",link:'', title:'数字化转型',
            subtitle:'数字化转型',
            content:'通过多年来丰富的技术积淀，推动、赋能数字化转型新价值',
            titleStyle:{
                "color":'#fff',
                "fontSize":48,
                "margin-top":0,
                "margin-left":0,
            },
            contentStyle:{
                "color":'#fff',
                "fontSize":28,
                "margin-top":0,
                "paddingAlign":20,
                "borderWidth":1,
                "paddingBetween":45,
                "margin-right":0,
                "margin-left":0,
            }})
            }
        },
    }

}
</script>

<style>

</style>